<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="/the-good-thing-of-wang-feizhai/vue_basic/js/vue.js"></script>
    <div id="root">
        <cpn :childmovies="movies" v-bind:childmsg="msg"></cpn>
        <!-- <cpn3></cpn3> -->
    </div>

    <!-- 模板分离方法 -->

        <!-- 方式1：使用script标签，将组件的模板内容在单独的js中编码,注意类型必须是text/x-template-->
    <script type="text/x-template" id="cpnT"> 
          <div>
            <ul>
                <li v-for="item in childmovies">{{item}}</li>
            </ul>
            <h2>{{childmsg}}</h2>
            <p>内容1</p>
          </div>
    </script>

    <script>

        class Button{

        }

        const cpn = {
            template: "#cpnT",
            data(){
                return{
                    msg:'Hello,cpn2'
                }
            },
            // 1.用数组
            // props:['childmovies','childmsg'],
            // 2.用对象
            props:{
                // 1.可以验证数据类型,类型的限制
                // childmovies:Array,
                // 2.可以限制多个
                // childmsg:[Array,String]
                // 3.可以使用自定义
                // childmovies:Button
                // 4.对象语法
                childmovies:{
                    type:Array,// 数据类型的限制
                    default:'hello',// 默认值,如果父组件未向子组件传递数据时,显示
                    required:true// 是否必填
                },
                childmsg:{
                    type:[Array,String],
                    default(){
                        return ['red','blue','yellow']
                    },
                    
                }
            }
        }


        new Vue({
            el:'#root',
            data(){
                return{
                    msg:'hello',
                    movies:['A','B','C']
                }
            },
            methods: {
            },
            components:{
                cpn
            }
        })
    </script>
</body>
</html>